<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">		
		<title>Sky Mega Menu</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-mega-menu.css">
		<link rel="stylesheet" href="css/sky-mega-menu-red.css">
		
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!--[if lt IE 10]>
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->
	</head>
	<body class="bg-red">
		<div class="body">
			<aside>
				<!-- mega menu -->
				<ul class="sky-mega-menu sky-mega-menu-pos-left sky-mega-menu-anim-scale sky-mega-menu-response-to-switcher">					
					<!-- dashboard -->
					<li>
						<a href="#"><i class="fa fa-dashboard"></i>Dashboard</a>
					</li>
					<!--/ dashboard -->
					
					<!-- switcher -->
					<li class="switcher">
						<a href="#"><i class="fa fa-bars"></i>Menu</a>
					</li>
					<!--/ switcher -->
					
					<!-- posts -->
					<li aria-haspopup="true">
						<a href="#"><i class="fa fa-thumb-tack"></i>Posts</a>
						<div class="grid-container3">
							<ul>
								<li>
									<a href="#"><i class="fa fa-list"></i>All posts</a>
									<div class="grid-container3">
										<ul>
											<li><a href="#">Published</a></li>
											<li><a href="#">Pending review</a></li>
											<li><a href="#">Drafts</a></li>
											<li><a href="#">Removed</a></li>
										</ul>
									</div>
								</li>
								<li><a href="#"><i class="fa fa-plus"></i>Add new</a></li>
								<li><a href="#"><i class="fa fa-gear"></i>Categories</a></li>
								<li><a href="#"><i class="fa fa-tags"></i>Tags</a></li>
							</ul>
						</div>
					</li>
					<!--/ posts -->
					
					<!-- media -->
					<li aria-haspopup="true">
						<a href="#"><i class="fa fa-sun-o"></i>Media</a>
						<div class="grid-container3">
							<ul>
								<li>
									<a href="#"><i class="fa fa-th-large"></i>Library</a>
									<div class="grid-container3">
										<ul>
											<li><a href="#"><i class="fa fa-picture"></i>Pictures</a></li>
											<li><a href="#"><i class="fa fa-film"></i>Video</a></li>
											<li><a href="#"><i class="fa fa-music"></i>Audio</a></li>
										</ul>
									</div>
								</li>
								<li><a href="#"><i class="fa fa-plus"></i>Add new</a></li>
							</ul>
						</div>
					</li class="right">
					<!--/ media -->
					
					<!-- pages -->
					<li aria-haspopup="true">
						<a href="#"><i class="fa fa-file"></i>Pages</a>
						<div class="grid-container3">
							<ul>
								<li><a href="#"><i class="fa fa-list"></i>All pages</a></li>
								<li><a href="#"><i class="fa fa-plus"></i>Add new</a></li>
							</ul>
						</div>
					</li>
					<!--/ pages -->
					
					<!-- comments -->
					<li>
						<a href="#"><i class="fa fa-comments"></i>Comments</a>
					</li>
					<!--/ comments -->
					
					<!-- appearance -->
					<li aria-haspopup="true">
						<a href="#"><i class="fa fa-desktop"></i>Appearance</a>
						<div class="grid-container3">
							<ul>
								<li><a href="#"><i class="fa fa-adjust"></i>Themes</a></li>
								<li><a href="#"><i class="fa fa-sitemap"></i>Menus</a></li>
								<li><a href="#"><i class="fa fa-edit"></i>Editor</a></li>
							</ul>
						</div>
					</li>
					<!--/ appearance -->
					
					<!-- plugins -->
					<li aria-haspopup="true">
						<a href="#"><i class="fa fa-bolt"></i>Plugins</a>
						<div class="grid-container3">
							<ul>
								<li><a href="#"><i class="fa fa-plus"></i>Add new</a></li>
								<li><a href="#"><i class="fa fa-edit"></i>Editor</a></li>
							</ul>
						</div>
					</li>
					<!--/ plugins -->
					
					<!-- users -->
					<li aria-haspopup="true">
						<a href="#"><i class="fa fa-group"></i>Users</a>
						<div class="grid-container3">
							<ul>
								<li><a href="#"><i class="fa fa-list"></i>All users</a></li>
								<li><a href="#"><i class="fa fa-plus"></i>Add new</a></li>
								<li><a href="#"><i class="fa fa-user"></i>Your profile</a></li>
							</ul>
						</div>
					</li>
					<!--/ users -->
					
					<!-- tools -->
					<li aria-haspopup="true" class="bottom">
						<a href="#"><i class="fa fa-wrench"></i>Tools</a>
						<div class="grid-container3">
							<ul>
								<li><a href="#"><i class="fa fa-lightbulb-o"></i>Available tools</a></li>
								<li><a href="#"><i class="fa fa-download"></i>Import</a></li>
								<li><a href="#"><i class="fa fa-upload"></i>Export</a></li>
							</ul>
						</div>
					</li>
					<!--/ tools -->
					
					<!-- settings -->
					<li aria-haspopup="true" class="bottom">
						<a href="#"><i class="fa fa-gears"></i>Settings</a>
						<div class="grid-container3">
							<ul>
								<li><a href="#"><i class="fa fa-book"></i>General</a></li>
								<li><a href="#"><i class="fa fa-pencil"></i>Writing</a></li>
								<li><a href="#"><i class="fa fa-eye"></i>Reading</a></li>
								<li><a href="#"><i class="fa fa-comments"></i>Discussion</a></li>
								<li><a href="#"><i class="fa fa-picture-o"></i>Media</a></li>
								<li><a href="#"><i class="fa fa-link"></i>Permalinks</a></li>
							</ul>
						</div>
					</li>
					<!--/ settings -->
				</ul>
				<!--/ mega menu -->
			</aside>			
		</div>
	</body>
</html>